<template>
    <div class="wrapper">
        <minbar title="我关注的门店" :isPadding="true"></minbar>
        <!-- 无门店 -->
        <div class="x-nodata" v-if="nodata">
            <image class="x-image" :src="imgsrc"></image>
            <text class="x-title">还未关注过门店</text>
            <text class="x-look">看看附近有哪些门店</text>
            <text class="x-look-btn" @click="showNeStore">点击查看</text>
        </div>
        <!-- 我关注的门店 -->
        <list show-scrollbar="flase">
            <refresh class="refresh"  @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <cell>
                <x-listpage :listData="listData" @listClick="listClick"></x-listpage>
            </cell>
        </list>
    </div>   
</template>

<script>
import asCore from "../../../common/js/core";
const navigator = weex.requireModule('navigator');
export default {
    components:{
        "minbar" : require("../../../common/component/minbar.vue"),
        "x-listpage" : require("./comp/storeList.vue")
    }, 
    data () {
        return {
            refreshing:false,
            imgsrc:asCore.localpath + "img/store/nostore.png",
            listData:[],
            nodata:false
        }
    },
    created() {
        this.getData();
    }, 
    methods:{
        /**获取门店数据 */
       getData(callback) {
           asCore.post("/member/store/list",{},(data,msg,flag)=>{
                if(flag==true){
                    this.listData = data;
                    data.length>0?
                        this.nodata = false:
                        this.nodata = true;
                }else{
                    this.nodata = true;
                }
                callback && callback();
           });
       },
       /**下拉刷新 */
       onrefresh() {
            this.refreshing = true;
            this.getData(()=>{
                this.refreshing = false;
            });
       },
       /**打开附近的门店 */
       showNeStore() {
           navigator.push(asCore.localpath + 'tailor/app/store/nestore.js');
       },
       /*打开门店 */
       listClick(data){
           //asCore.alert(JSON.stringify(data));
           navigator.pushParam(
                asCore.localpath + 'tailor/store/index.js',{
                    data: data
                }
            );
       }
    }
}
</script>
<style scoped>
.wrapper{
    background-color: #dedfe1;
}
.iconfont{
    font-family: iconfont;
}
.x-nodata {
    position: absolute;
    top:130;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    padding-top:300px;
    background-color: #fff;
}
.x-image {
    width: 750px;
    height: 250px;
}
.x-title {
    color:#68686a;
    font-size:28px;
    padding-top:10px;
    padding-bottom:5px;
}
.x-look {
    color:#1f1e24;
    font-size:32px;
}
.x-look-btn {
    margin-top:25px;
    color:#af0a2a;
    font-size: 32px;
    width:300px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 10px;
    border-color: #af0a2a;
    border-width: 1px;
}
.x-look-btn:active {
    background-color: #af0a2a;
    color: #fff;
}
.x-content-top {
    padding-left: 15px;
    justify-content: center;
    height: 95px;
    background-color: #fff;
}
.x-content-title {
    font-size: 32px;
    color:#1f1e24;
}
 /*刷新加载更多类的样式*/
.refresh {
  width: 750;
  display: flex;
  align-items: center;
}
.indicator {
  margin-top: 30px;
  margin-bottom: 20px;
  height: 70px;
  width: 70px;
  color: #ce2020;
}
.indicator-text {
  color: #888;
  font-size: 30px;
  text-align: center;
}
</style>